<template>
    <div class="map-manage">
        <div class="left-block flex-block">
            <!-- 设备在线统计 -->
            <div class="item-block">
                <div class="title">设备在线统计</div>
                <div class="deviceChartBox" id="deviceChart"></div>
            </div>
            <!-- 车队分布 -->
            <div class="item-block">
                <div class="title">车队分布</div>
                <div class="car-list-chart">
                    <div class="car-list-chart-box">
                        <div class="carChartBox" id="carChart1"></div>
                        <div class="carChartBox" id="carChart2"></div>
                    </div>
                    <div class="chart-info">
                        <div class="chart-item">
                            <div class="info-item">
                                <span class="info-lable">洒水车</span>
                                <span class="info-val">100</span>
                            </div>
                            <div class="info-item">
                                <span class="info-lable">运输车</span>
                                <span class="info-val">100</span>
                            </div>
                            <div class="info-item">
                                <span class="info-lable">清扫车</span>
                                <span class="info-val">100</span>
                            </div>
                        </div>
                        <div class="chart-item">
                            <div class="info-item">
                                <span class="info-lable">洒水车</span>
                                <span class="info-val">100</span>
                            </div>
                            <div class="info-item">
                                <span class="info-lable">运输车</span>
                                <span class="info-val">100</span>
                            </div>
                            <div class="info-item">
                                <span class="info-lable">清扫车</span>
                                <span class="info-val">100</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 违规管理 -->
            <div class="item-block">
                <div class="title">违规管理</div>
                <div class="wg-manage">
                    <div class="num-box">
                        <span class="num-item">0</span>
                        <span class="num-item">0</span>
                        <span class="num-item">2</span>
                        <span class="num-item">5</span>
                        <span class="num-item">5</span>
                    </div>
                    <div class="count-box">
                        <div class="count-item">
                            <div class="count">159</div>
                            <div>违规驾驶</div>
                        </div>
                        <div class="count-item">
                            <div class="count">149</div>
                            <div>超速行驶</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="center-block">
            <div class="census-line">
                <div class="census-item">
                    <div class="icon-box">
                        <img src="@/assets/images/icon-car-ss.png" alt="" />
                    </div>
                    <div class="count-box">
                        <div class="word">晒水车</div>
                        <div class="count">
                            <span class="num">160</span>
                            <span class="unit">辆</span>
                        </div>
                    </div>
                </div>
                <div class="census-item">
                    <div class="icon-box">
                        <img src="@/assets/images/icon-car-qs.png" alt="" />
                    </div>
                    <div class="count-box">
                        <div class="word">清扫车</div>
                        <div class="count">
                            <span class="num">160</span>
                            <span class="unit">辆</span>
                        </div>
                    </div>
                </div>
                <div class="census-item">
                    <div class="icon-box">
                        <img src="@/assets/images/icon-car-ys.png" alt="" />
                    </div>
                    <div class="count-box">
                        <div class="word">运输车</div>
                        <div class="count">
                            <span class="num">160</span>
                            <span class="unit">辆</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="right-block flex-block">
            <!-- 报警信息 -->
            <div class="item-block alarm-block">
                <div class="title">报警信息</div>
                <div class="diy-table">
                    <div class="diy-table-header diy-tr">
                        <div class="diy-td">类型</div>
                        <div class="diy-td">详细</div>
                        <div class="diy-td">车类</div>
                        <div class="diy-td">车牌号</div>
                        <div class="diy-td">报警时间</div>
                    </div>
                    <div class="diy-table-body">
                        <div class="diy-tr">
                            <div class="diy-td">
                                <img src="@/assets/images/icon-bjxx1.png" alt="" />
                            </div>
                            <div class="diy-td error">
                                <span>油量过低报警</span>
                            </div>
                            <div class="diy-td">
                                <span>清扫车</span>
                            </div>
                            <div class="diy-td">
                                <span>浙G88888</span>
                            </div>
                            <div class="diy-td">
                                <span>11-03 09:00</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 运输垃圾周报 -->
            <div class="item-block report-item">
                <div class="title">运输垃圾周报</div>
                <div class="legend clearfix">
                    <div class="word fl">单位:吨</div>
                    <div class="legend-item jd fl">金东区</div>
                    <div class="legend-item wc fl">婺城区</div>
                </div>
                <div class="count-table">
                    <div class="count-table-item" v-for="(item, index) in reportData" :key="index">
                        <div class="date">周一</div>
                        <div class="count">
                            <div class="value1">{{ item.value1 }}</div>
                            <div class="value2">{{ item.value2 }}</div>
                        </div>
                    </div>
                </div>
                <div class="report-chart">
                    <div class="report-chart-box" id="reportChart"></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            reportData: [
                {
                    value1: 5000,
                    value2: 6200
                },
                {
                    value1: 5000,
                    value2: 6200
                },
                {
                    value1: 5000,
                    value2: 6200
                },
                {
                    value1: 5000,
                    value2: 6200
                },
                {
                    value1: 5000,
                    value2: 6200
                },
                {
                    value1: 5000,
                    value2: 6200
                },
                {
                    value1: 5000,
                    value2: 6200
                }
            ]
        }
    },
    mounted() {
        const self = this
        // 设备在线统计
        const deviceMyChart = self.$echarts.init(document.getElementById('deviceChart'))
        const deviceData = [
            {
                name: '在线',
                value: 80
            },
            {
                name: '离线',
                value: 20
            }
        ]
        const deviceOption = {
            title: [
                {
                    text: '80%',
                    subtext: '在线',
                    x: '100px',
                    y: '60px',
                    textStyle: {
                        color: '#fff',
                        fontSize: 30,
                        fontWeight: 'normal'
                    },
                    subtextStyle: {
                        fontSize: 16,
                        color: '#28ca5a',
                        fontWeight: 'normal'
                    }
                }
            ],
            legend: {
                orient: 'vertical', // 布局方式，默认为水平布局，可选为：
                x: '60%',
                y: '10%',
                data: deviceData,
                padding: 5, // 图例内边距，单位px，默认各方向内边距为5，
                // 接受数组分别设定上右下左边距，同css
                itemGap: 80, // 各个item之间的间隔，单位px，默认为10，
                // 横向布局时为水平间隔，纵向布局时为纵向间隔
                itemWidth: 24, // 图例图形宽度
                itemHeight: 14, // 图例图形高度
                textStyle: {
                    fontSize: 16,
                    color: '#fff' // 图例文字颜色
                },
                formatter: (name) => {
                    let str = ''
                    for (let i = 0; i < deviceData.length; i++) {
                        if (deviceData[i].name === name) {
                            str = name + '（' + deviceData[i].value + '）'
                        }
                    }
                    return str
                }
            },
            angleAxis: {
                max: 100,
                show: false,
                startAngle: 0
            },
            radiusAxis: {
                type: 'category',
                show: false
            },
            series: [
                {
                    name: '面积模式',
                    type: 'pie',
                    radius: [65, 75],
                    center: ['30%', '50%'],
                    label: {
                        show: false
                    },
                    data: [
                        {
                            value: 100 - 80,
                            name: '离线',
                            itemStyle: {
                                color: '#c65e42'
                            }
                        },
                        {
                            value: 100 - 20,
                            itemStyle: {
                                color: 'transparent'
                            }
                        }
                    ]
                },
                {
                    name: '面积模式',
                    type: 'pie',
                    radius: [60, 80],
                    center: ['30%', '50%'],
                    label: {
                        show: false
                    },
                    data: [
                        {
                            value: 100 - 80,
                            name: 'offline',
                            itemStyle: {
                                color: 'transparent'
                            }
                        },
                        {
                            value: 100 - 20,
                            name: '在线',
                            itemStyle: {
                                color: '#28ca5a'
                            }
                        }
                    ]
                }
            ]
        }
        deviceMyChart.setOption(deviceOption, true)
        // 车队分布
        const carChart1 = self.$echarts.init(document.getElementById('carChart1'))
        const carChart2 = self.$echarts.init(document.getElementById('carChart2'))
        const dataArr = [
            {
                value: 380,
                name: '金东区'
            }
        ]
        const dataArr2 = [
            {
                value: 360,
                name: '婺城区'
            }
        ]
        const colorSet = [
            [
                0.95,
                {
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 0,
                    colorStops: [
                        {
                            offset: 0,
                            color: '#00ffff' // 0% 处的颜色
                        },
                        {
                            offset: 1,
                            color: '#FFFF37' // 100% 处的颜色
                        }
                    ]
                }
            ],
            [1, '#00ffff']
        ]
        const colorSet2 = [
            [
                0.95,
                {
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 0,
                    colorStops: [
                        {
                            offset: 0,
                            color: '#00ffff' // 0% 处的颜色
                        },
                        {
                            offset: 1,
                            color: '#ff6000' // 100% 处的颜色
                        }
                    ]
                }
            ],
            [1, '#00ffff']
        ]
        const carOption = {
            series: [
                {
                    type: 'gauge',
                    radius: '100%',
                    z: 1,
                    startAngle: 225,
                    endAngle: -45,
                    title: {
                        offsetCenter: ['0', '70%'],
                        color: '#fff',
                        fontSize: 18
                    },
                    splitLine: {
                        show: true,
                        length: 15,
                        distance: -15,
                        lineStyle: {
                            color: 'rgba(0,0,0,0.5)',
                            width: 6
                        }
                    },
                    detail: {
                        show: true,
                        offsetCenter: [0, 60],
                        fontSize: 22,
                        formatter: (val) => [`{a|${val}}`].join(''),
                        rich: {
                            a: {
                                padding: [0, 0, 120, 0],
                                fontSize: 50,
                                color: '#fff'
                            }
                        }
                    },
                    // 仪表盘的线，颜色值为一个数组
                    axisLine: {
                        show: true,
                        lineStyle: {
                            width: 15,
                            color: colorSet
                        }
                    },
                    // 仪表盘刻度标签
                    axisLabel: {
                        show: false
                    },
                    // 刻度
                    axisTick: {
                        show: false
                    },
                    pointer: {
                        show: false
                    },
                    data: dataArr
                }
            ]
        }
        const carOption2 = {
            series: [
                {
                    type: 'gauge',
                    radius: '100%',
                    z: 1,
                    startAngle: 225,
                    endAngle: -45,
                    title: {
                        offsetCenter: ['0', '70%'],
                        color: '#fff',
                        fontSize: 18
                    },
                    splitLine: {
                        show: true,
                        length: 15,
                        distance: -15,
                        lineStyle: {
                            color: 'rgba(0,0,0,0.5)',
                            width: 6
                        }
                    },
                    detail: {
                        show: true,
                        offsetCenter: [0, 60],
                        fontSize: 22,
                        formatter: (val) => [`{a|${val}}`].join(''),
                        rich: {
                            a: {
                                padding: [0, 0, 120, 0],
                                fontSize: 50,
                                color: '#fff'
                            }
                        }
                    },
                    // 仪表盘的线，颜色值为一个数组
                    axisLine: {
                        show: true,
                        lineStyle: {
                            width: 15,
                            color: colorSet2
                        }
                    },
                    // 仪表盘刻度标签
                    axisLabel: {
                        show: false
                    },
                    // 刻度
                    axisTick: {
                        show: false
                    },
                    pointer: {
                        show: false
                    },
                    data: dataArr2
                }
            ]
        }
        // 浅拷贝问题(不想写深拷贝函数了)
        carChart1.setOption(carOption, true)
        carChart2.setOption(carOption2, true)

        // 垃圾运输周报
        const reportOptionColor = [
            {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                    {
                        offset: 0,
                        color: '#52bd55'
                    },
                    {
                        offset: 1,
                        color: 'rgba(82,189,85, 0)'
                    }
                ]
            },
            'rgba(175,125,77, 0.8)'
        ]
        const reportOption = {
            color: reportOptionColor,
            grid: {
                left: '30px',
                right: '0',
                top: '5%'
            }, //图表的位置
            xAxis: {
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#fff',
                        width: 1 //轴线宽
                    }
                },
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            },
            yAxis: {
                axisLine: {
                    show: true, //坐标轴线显示与否
                    lineStyle: {
                        color: '#fff',
                        width: 1 //轴线宽
                    }
                },
                axisTick: {
                    show: false
                },
                splitLine: {
                    show: false
                }
            },
            series: [
                {
                    name: '数据一',
                    type: 'bar',
                    stack: '叠加',
                    barWidth: 24,
                    data: [10, 18, 50, 40, 54, 16, 28]
                },
                {
                    name: '数据二',
                    stack: '叠加',
                    barWidth: 24,
                    type: 'bar', //换为line 实现折线与柱状图
                    data: [10, 18, 50, 40, 54, 16, 28]
                }
            ]
        }
        const reportChart = self.$echarts.init(document.getElementById('reportChart'))
        reportChart.setOption(reportOption, true)
    }
}
</script>
